<template>
  <div class="permission">
    <el-card>
      <el-table :data="AllPermission" row-key="id" max-height="650">
        <el-table-column min-width="150" label="名称" prop="name" />
        <el-table-column label="权限ID" prop="id" />
        <el-table-column label="权限值" prop="code" />
        <el-table-column label="修改时间" prop="updateTime" />
        <el-table-column fixed="right" min-width="240" label="操作" align="center">
          <template #default="scope">
            <el-button type="primary" text bg size="small" @click="handleAdd(scope.row)">
              添加菜单
            </el-button>
            <el-button type="primary" text bg size="small" @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-button type="danger" text bg size="small" @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="dialogVisible" :title="formData.id ? '编辑' : '添加'" @close="resetForm(formRef)">
      <el-form ref="formRef" :model="formData" label-width="100px" label-position="left">
        <el-form-item prop="name" label="菜单名" :rules="[{required:true,message:'不能为空', trigger: 'blur'}]">
          <el-input v-model="formData.name" placeholder="请输入菜单名..." />
        </el-form-item>
        <el-form-item prop="code" label="菜单权限值" :rules="[{required:true,message:'不能为空', trigger: 'blur'}]">
          <el-input v-model="formData.code" placeholder="请输入菜单权限值..." />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="resetForm(formRef)">
          取消
        </el-button>
        <el-button type="primary" :loading="loading" @click="handleCreateOrUpdate(formRef)">
          确认
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="Permission">
import { reactive, ref } from 'vue';
import { AddMenuAPI, AllPermissionAPI, EditeMenuAPI , DeleteMenuAPI} from '@/apis/acl/menu/index'

const dialogVisible = ref(false)
const loading = ref(false)
const formRef = ref(null)
const formData = reactive({
  id: null,
  name: '',
  code: '',
  level: 0,
  pid: 0
})


const AllPermission = ref([])
// 查
const getAllPermission = () => {
  AllPermissionAPI().then((res) => {
    console.log(res);
    AllPermission.value = res.data
  })
}

// 添加
const handleAdd = (row: any) => {
  Object.assign(formData, {
    id: null,
    name: '',
    code: '',
    level: 0,
    pid: 0
  })
  dialogVisible.value = true
  formData.level = row.level + 1
  formData.pid = row.id
}

// 编辑
const handleEdit = (row: any) => {
  // console.log(row);
  // 这里可以封装一个循环来赋值，懒得搞了
  formData.id = row.id
  formData.name = row.name
  formData.code = row.code
  formData.level = row.level
  formData.pid = row.pid
  dialogVisible.value = true
}

// 提交
const handleCreateOrUpdate = async(formRef:any) => {
  await formRef.validate((valid:any) => {
    if (valid) {
      if(formData.id){
        console.log(formData.id);
        EditeMenuAPI(formData).then((res:any)=>{
          // console.log('添加',res);
          ElMessage.success('编辑成功'+res.code)
          getAllPermission()
        }).catch((error)=>{
          ElMessage.error('编辑失败请重试')
        })
      }else{
        AddMenuAPI(formData).then((res:any)=>{
          // console.log('编辑',res);
          ElMessage.success('添加成功'+res.code)
          getAllPermission()
        }).catch((error)=>{
          ElMessage.error('添加失败请重试')
        })
      }
      dialogVisible.value = false
    }else{
      ElMessage.error("表单校验不通过")
    }
  })

}

// 删除
const handleDelete = async (row: any) => {
  try {
    await ElMessageBox.confirm(
      `确认删除:${row.name}吗?`,
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    DeleteMenuAPI(row.id).then((res:any) => {
      console.log(res);
      ElMessage.success('删除成功'+res.code)
      getAllPermission()
    })
  } catch (error) {
    ElMessage.error('已取消删除')
  }
}



// 清除规则、
const resetForm = (formRef:any) => {
  if (!formRef) return
  dialogVisible.value = false
  formRef.resetFields()
}
// 获取所有菜单
getAllPermission()
</script>

<style scoped></style>
